<template>
  <div>

    <el-dialog :title="seal.title" :visible.sync="seal.open" width="80%" append-to-body :before-close="closeDelDialog">
      <div style="height: calc(77vh - 64px); overflow-y: auto">
        <el-form ref="sealForm" :model="sealForm" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="颜色" prop="color">
                <div class="line-main">
                  <el-input placeholder="请输入内容" v-model="sealForm.color"></el-input>
                  <el-color-picker v-model="sealForm.color" color-format="rgb"
                    style="position: absolute; right: 0px"></el-color-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="字体" prop="font">
                <el-select v-model="sealForm.font" style="width: 100%;">
                  <el-option v-for="dict in dict.type.FONT" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="字号" prop="fontSize">
                <el-select v-model="sealForm.fontSize" style="width: 100%;">
                  <el-option v-for="dict in dict.type.FONT_SIZE" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="文字位置" prop="align">
                <el-select v-model="sealForm.align" style="width: 100%;">
                  <el-option v-for="dict in alignOption" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="边框粗细" prop="fontBold">
                <el-select v-model="sealForm.fontBold" style="width: 100%;">
                  <el-option v-for="dict in dict.type.FONT_BOLD" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门类" prop="categoryId">
                <treeselect v-model="sealForm.categoryId" :options="deptOptions" clearable style="width: 100%"
                 noResultsText="暂无数据" placeholder="请选择档案门类" :disable-branch-nodes="true"
                  @select="onChangeSelect" :normalizer="normalizerCategoryID"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总体高度(cm)" prop="totalHeight">
                <el-input-number v-model="sealForm.totalHeight" controls-position="right" :min="1" placeholder="请输入总体高度"
                  style="width: 100%;" @change="getTotalTap" :disabled="isCol"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总体宽度(cm)" prop="totalWidth">
                <el-input-number v-model="sealForm.totalWidth" controls-position="right" :min="1" placeholder="请输入总体宽度"
                  style="width: 100%;" @change="getTotalTap" :disabled="isRow"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="x轴(px)" prop="xPosition">
                <el-input-number v-model="sealForm.xPosition" controls-position="right" placeholder="请输入x轴"
                  style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="y轴(px)" prop="yPosition">
                <el-input-number v-model="sealForm.yPosition" controls-position="right" placeholder="请输入y轴"
                  style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行数" prop="rowNum">
                <el-input-number v-model="sealForm.rowNum" controls-position="right" :min="1" :max="5" placeholder="请输入行数"
                  style="width: 100%;" @change="generateTable"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="列数" prop="colNum">
                <el-input-number v-model="sealForm.colNum" controls-position="right" :min="1" :max="5" placeholder="请输入列数"
                  style="width: 100%;" @change="generateTable"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="归档章添加" prop="imagePath">
                <el-select v-model="sealForm.imagePath" style="width: 100%;">
                  <el-option v-for="dict in dict.type.PAGEOFADD" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">生成表格</el-divider>
          <!-- {{ tableData }} -->
          <table style="width: 96%;margin:3% auto 0" border
            v-show="sealForm.colNum != undefined || sealForm.rowNum != undefined">
            <thead>
              <tr>
                <th v-for="(cell, colIndex) in tableTITleList" :key="colIndex" style="width: 40px">
                  <el-form-item label="宽(cm)" label-width="60px" style="margin: 0;padding:5px 0">
                    <el-input-number v-model="cell.width" controls-position="right" style="width:80%; float: left"
                      @change="changeWidthTap(cell)" :disabled="isRow" ref="input" />
                  </el-form-item>
                </th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                <td v-for="(cell, colIndex) in row" :key="colIndex" class="bed" :rowspan="cell.rowspan"
                  :colspan="cell.colspan"
                  :style="{ width: cell.width + 'px', height: cell.height + 'px', left: cell.x + 'px', top: cell.y + 'px' }"
                  style="cursor: pointer;" @mouseleave="showText(1, 'buttonHover' + rowIndex + '' + colIndex)"
                  @mouseenter="showText(2, 'buttonHover' + rowIndex + '' + colIndex)">

                  <div style="width: 100%; height:100%;position: relative;align-items: center;display: flex ">
                    <!-- 合并行 -->
                    <el-button type="primary" icon="el-icon-bottom" circle size="mini"
                      @click="mergeRow(rowIndex, colIndex)" v-if="tableData.length != rowIndex + 1"
                      style="position: absolute;bottom: 0;right: 50%;transform: translate(50%, 50%);z-index:666;display:none"
                      :class="['buttonHover' + rowIndex + '' + colIndex]"></el-button>
                    <!-- 合并列 -->
                    <el-button type="primary" icon="el-icon-right" circle size="mini"
                      @click="mergeColumn(rowIndex, colIndex)" v-if="row.length != colIndex + 1"
                      style="position: absolute;top: 50%;right: 0;transform: translate(55%, -50%);z-index:666;display: none;"
                      :class="['buttonHover' + rowIndex + '' + colIndex]"></el-button>

                    <el-select v-model="cell.type" style="margin-left:9%;width: 40%">
                      <el-option v-for="dict in cellTypesOption" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>

                    <template v-if="cell.type == '2'">
                      <el-select v-model="cell.value" filterable style="margin-left: 2%; width: 40%">
                        <!-- 动态值的选项 -->
                        <el-option v-for="dict in dynamicOption" :key="dict.value" :label="dict.label"
                          :value="dict"></el-option>
                      </el-select>
                    </template>
                    <template v-else-if="cell.type == '1'">
                      <el-input type="text" v-model="cell.value" style="margin-left:2%; width: 40%" />
                    </template>


                  </div>


                </td>
                <td style="width: 100px">
                  <el-form-item label="高(cm)" label-width="60px" style="margin-bottom: 0">
                    <el-input-number type="number" v-model="tableheigthList[rowIndex].height" controls-position="right"
                      style="width: 100%; float: left" @change="changeHeigthTap(tableheigthList[rowIndex])"
                      :disabled="isCol" />
                  </el-form-item>
                </td>
              </tr>


            </tbody>
          </table>
          <el-empty description="暂无收据" v-show="sealForm.colNum == undefined || sealForm.rowNum == undefined"
            style="margin-top:8%"></el-empty>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" plain @click="onPreviewTap">预 览</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDelDialog">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog id="dialogPdf1" title="预览" :visible.sync="open" width="55%" append-to-body :before-close="closeTap">
      <div style="width:100%;margin:0 auto">
        <pdfDemo :url="pdfUrl" operate="online" style="height:740px"></pdfDemo>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cateMdataList, listGROUPTree, addSeal, listNoPage, viewSeal, updateSeal, deleteTempFile, listNoPageID } from "@/api/stage/stageManagement/archiveSeal";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import pdfDemo from '@/components/componentsPdf/index1.vue'
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {
  name: "filingSeal",
  props: ['seal', 'dataInfo'],
  archive_Dicts: ['FONT', 'FONT_SIZE', 'FONT_BOLD', 'PAGEOFADD'],
  components: { Treeselect, pdfDemo },
  data() {
    const checkLength = (rule, value, callback) => {
      if (value) {
        var reg = /^(?!0)[0-9]{1,9}$/
        if (reg.test(value) === false) {
          callback(new Error('请输入数字，1-9位'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      open: false,
      isRow: false,
      isCol: false,
      // 表单
      sealForm: {

        totalHeight: undefined,
        totalWidth: undefined,
        color: undefined,
        font: undefined,
        align: undefined,
        fontSize: undefined,
        fontBold: undefined,
        xPosition: undefined,
        yPosition: undefined,
        // rowNum:undefined,
        // colNum:undefined
        imagePath: undefined
      },
      columnWidths: 100,
      rowHeights: 50,
      cellTypes: {},
      dynamicValues: {},
      staticValues: {},
      // 表单校验规则
      rules: {
        color: [
          { required: true, message: "请输入颜色", trigger: "blur" },
        ],
        font: [
          { required: true, message: "请输入字体", trigger: "blur" },
        ],
        fontSize: [
          { required: true, message: "请输入字号", trigger: "blur" },
        ],
        align: [
          { required: true, message: "请输入文字位置", trigger: "blur" },
        ],
        fontBold: [
          { required: true, message: "请输入边框粗细", trigger: "blur" },
        ],
        totalHeight: [
          { required: true, message: "请输入总体高度", trigger: "blur" },
        ],
        totalWidth: [
          { required: true, message: "请输入总体宽度", trigger: "blur" },
        ],
        xPosition: [
          { required: true, message: "请输入x轴", trigger: "blur" },
        ],
        yPosition: [
          { required: true, message: "请输入y轴", trigger: "blur" },
        ],
        rowNum: [
          { required: true, message: "请输入行数", trigger: "blur" },
          { trigger: 'blur', validator: checkLength }
        ],
        colNum: [
          { required: true, message: "请输入列数", trigger: "blur" },
          { trigger: 'blur', validator: checkLength }
        ],
        imagePath: [
          { required: true, message: "请选择归档章添加", trigger: "blur" },
        ],
      },
      // 位置下拉框
      alignOption: [
        { value: 'left', label: '居左' },
        { value: 'center', label: '居中' },
        { value: 'right', label: '居右' },
      ],
      // 固定值 动态值 下拉框
      cellTypesOption: [
        { value: '1', label: '固定值' },
        { value: '2', label: '动态值' },
      ],
      // 动态值下拉框
      dynamicOption: [],
      // 树选项
      deptOptions: [],
      categoryId: undefined,

      tableData: [], //表格
      tableTITleList: [], //设置表格宽度列表
      tableheigthList: [],//设置表格高度
      pdfUrl: "",
    }
  },
  watch: {
    dataInfo: {
      handler(val) {
        if (val != undefined) {  //修改
          listNoPageID(val.id).then(res => {
            console.log(res, res.data.rowNum, "PPP")
            this.sealForm.color = res.data.color;
            this.sealForm.font = res.data.font;
            this.sealForm.fontSize = res.data.fontSize;
            this.sealForm.align = res.data.align;
            this.sealForm.fontBold = res.data.fontBold;
            this.sealForm.categoryId = res.data.categoryId;
            this.sealForm.totalHeight = res.data.totalHeight;
            this.sealForm.totalWidth = res.data.totalWidth;
            this.sealForm.xPosition = res.data.xPosition;
            this.sealForm.yPosition = res.data.yPosition;
            this.sealForm.colNum = res.data.colNum;
            this.sealForm.rowNum = res.data.rowNum;
            this.sealForm.imagePath = res.data.imagePath;
            var tableStyle = JSON.parse(res.data.tableStyle);


            for (var i = 1; i <= res.data.rowNum; i++) {


              this.tableheigthList.push({
                rowspan: 1,
                colspan: 1,
                height: res.data.totalHeight / res.data.rowNum,
                text: i,
                text1: i,
                type: "1",
                value: undefined,
                width: res.data.totalWidth / res.data.colNum,
                y: (i - 1) * res.data.totalHeight / res.data.rowNum,
              })
            }

            for (var i = 1; i <= res.data.colNum; i++) {
              this.tableTITleList.push({
                colspan: 1,
                height: res.data.totalHeight / res.data.rowNum,
                rowspan: 1,
                colspan: 1,
                text: i,
                text1: i,
                type: "1",
                value: undefined,
                width: res.data.totalWidth / res.data.colNum,
                x: (i - 1) * res.data.totalWidth / res.data.colNum,
                y: 0
              })
            }
            this.tableData = tableStyle;

          })
        }

      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getDeptTree()
    listNoPage({
      isCommon: "1",
      state: 1,
      type: 0
    }).then(response => {
      console.log(response, "++++++++++++++++++++++++++++")
      this.dynamicOption = response.rows.map(item => {
        return {
          label: item.fieldCaption,
          value: item.fieldName
        }
      })
    })
  },
  methods: {
     // 只能选择数据下面有children 的数据，没有children的时候禁用
     normalizerCategoryID(node) {
            if (node.nodeType == 'fonds') {
                if (node.children == undefined || node.children == null || !node.children.length) {

                    node['isDisabled'] = true;
                }

            }
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },


    showText(val, classType) {
      if (val == 2) {//进入元素
        $("." + classType).css("display", "block")
      } else { //离开元素
        $("." + classType).css("display", "none")
      }
    },
    // 获取档案门类树
    getDeptTree() {
      listGROUPTree().then(response => {
        this.deptOptions = response.data;
      })
    },
   
    onChangeSelect(node, instanceId) {
      this.sealForm.category = node.label
      console.log(node)
      this.form = {
        categoryId: node.id,
        groupId: node.groupId,
        type: '0',
        pageNum: 1,
        pageSize: 20000,
        // isHidden: 0
      }
      cateMdataList(this.form).then(response => {
        this.dynamicOption = response.rows.map(item => {
          return {
            label: item.fieldCaption,
            value: item.fieldName
          }
        })
      })
    },
    //输入宽度
    changeWidthTap(val) {
      for (var i in this.tableData) {
        for (var j in this.tableData[i]) {
          if (this.tableData[i][j].text1 == val.text1) {
            this.tableData[i][j].width = val.width;
            //先判断是不是不是最后一个，如果不是最后一个才计算下一个单元格
            if (j != this.tableData[i].length - 1) {
              for (var n = parseInt(j) + 1; n < this.tableData[i].length; n++) {
                this.tableData[i][n].x = this.tableData[i][n - 1].x + this.tableData[i][n - 1].width;
              }
            }

          }

        }
      }
    },

    //输入高度
    changeHeigthTap(val) {
      for (var i in this.tableData) {
        for (var j in this.tableData[i]) {
          if (val.text == this.tableData[i][j].text) {
            // console.log(this.tableData[i][j])
            this.tableData[i][j].height = val.height
            if (i != this.tableData.length - 1) {
              for (var n = parseInt(i) + 1; n < this.tableData.length; n++) {
                for (var k in this.tableData[n]) {
                  this.tableData[n][k].y = this.tableData[n - 1][0].y + this.tableData[n - 1][0].height
                }

              }
            }
          }
        }
      }
    },

    //将cm转成px 传给后端
    // 定义函数来进行转换
 convertCmToPx (cmValue) {
  // 获取设备的dpi值
  const dpi = window.devicePixelRatio || 1;

  // 计算每英寸对应的像素数量
  const pixelsPerInch = 96 * dpi;

  // 根据屏幕分辨率计算每厘米对应的像素数量
  const pixelsPerCentimeter = pixelsPerInch / 2.54;

  // 使用上面得到的比例因子将cm值转换为px值
  return cmValue * pixelsPerCentimeter;
},





    //生成表格title  設置表格的宽度
    getTitleTable() {
      console.log(this.convertCmToPx(3.44),"0000")
      //根据输入列  生成设置表格宽度
      if (this.sealForm.colNum != undefined) {
        var tableTITleList = [];
        for (var i = 1; i <= this.sealForm.colNum; i++) {

          tableTITleList.push({
            text: i, text1: i, type: "1", value: undefined, rowspan: 1, colspan: 1, width: this.sealForm.totalWidth / this.sealForm.colNum,widthPx:this.convertCmToPx(this.sealForm.totalWidth / this.sealForm.colNum), height: this.sealForm.totalHeight / this.sealForm.rowNum,heightPx:this.convertCmToPx(this.sealForm.totalHeight / this.sealForm.rowNum), x: (i - 1) * this.sealForm.totalWidth / this.sealForm.colNum,xPx:this.convertCmToPx((i - 1) * this.sealForm.totalWidth / this.sealForm.colNum), y: 0
          })
        }
        this.tableTITleList = tableTITleList;

      }

      //根据输入行  生成设置表格高度
      if (this.sealForm.rowNum != undefined) {
        var tableheigthList = [];
        for (var i = 1; i <= this.sealForm.rowNum; i++) {

          tableheigthList.push({
            text: i, text1: i, rowspan: 1, type: "1", value: undefined, colspan: 1, width: this.sealForm.totalWidth / this.sealForm.colNum,widthPx:this.convertCmToPx(this.sealForm.totalWidth / this.sealForm.colNum), height: this.sealForm.totalHeight / this.sealForm.rowNum,heightPx:this.convertCmToPx(this.sealForm.totalHeight / this.sealForm.rowNum), y: (i - 1) * this.sealForm.totalHeight / this.sealForm.rowNum,yPx:this.convertCmToPx((i - 1) * this.sealForm.totalHeight / this.sealForm.rowNum)
          })
        }
        this.tableheigthList = tableheigthList
      }

      this.getTable()
    },
    //生成table表格
    getTable(val) {
      console.log(val)
      //生成表格列表
      var tableTbodyList = [];
      for (var i in this.tableheigthList) {
        var arr = [];
        for (var j in this.tableTITleList) {
          arr.push({
            text: (parseInt(i) + 1), text1: (parseInt(j) + 1), type: "1", value: undefined, rowspan: 1, colspan: 1, width: this.tableTITleList[j].width,widthPx:this.convertCmToPx(this.tableTITleList[j].width), height: this.tableheigthList[i].height,heightPx:this.convertCmToPx(this.tableheigthList[i].height), x: this.tableTITleList[j].x,xPx:this.convertCmToPx(this.tableTITleList[j].x), y: this.tableheigthList[i].y,yPx:this.convertCmToPx(this.tableheigthList[i].y)
          })
        }
        tableTbodyList.push(arr)
      }
      this.tableData = tableTbodyList;
      console.log(this.tableData, "=-====")
    },
    generateTable() {
      this.getTitleTable();
    },
    getTotalTap() {
      this.getTitleTable();
    },



    //提交的数据
    formlist() {
      // console.log(this.sealForm,"0")
      var tableStyleJson = [];

      for (var i in this.tableData) {
        for (var j in this.tableData[i]) {
          if (this.tableData[i][j].value == undefined) {
            this.$message({ message: "请输入第" + this.tableData[i][j].text + "行，第" + this.tableData[i][j].text1 + "列的数据哦", type: 'warning' })
            return false
          }

        }
      }
      var heightNum = 0;
      for (var k in this.tableheigthList) {

        heightNum += this.tableheigthList[k].height
      }

      var widthNum = 0;
      for (var w in this.tableTITleList) {
        widthNum += this.tableTITleList[w].width
      }
      if (heightNum != this.sealForm.totalHeight) {
        this.$message.warning('每行的行高之和必须等于总体高度')
        return false
      }

      if (widthNum != this.sealForm.totalWidth) {
        this.$message.warning('每列的宽之和必须等于总体宽度哦')
        return false
      }
      this.sealForm.tableStyleJson = this.tableData;

      if (this.dataInfo != undefined) {

        this.sealForm.id = this.dataInfo.id
      }


      this.sealForm.totalHeightPx=this.convertCmToPx(this.sealForm.totalHeight);
      this.sealForm.totalWidthPx=this.convertCmToPx(this.sealForm.totalWidth);
      return this.sealForm
    },
    //提交
    submitForm() {
      var that = this;
      console.log(this.formlist(),"sdjfhjksdhfjk")
      this.$refs["sealForm"].validate(valid => {
        if (valid) {
          var arr = this.formlist();

          if (arr) {
            if (this.dataInfo != undefined) {  //修改
              updateSeal(this.formlist()).then(res => {
                that.reset();
                that.resetForm('sealForm')
                that.$nextTick(function (res) {
                  that.$emit("submitForm")
                })

              })
            } else {
              addSeal(this.formlist()).then(res => {
                that.reset();
                that.resetForm('sealForm')
                that.$nextTick(function (res) {
                  that.$emit("submitForm")
                })

              })
            }

          }
        }
      })

    },

    //预览
    onPreviewTap() {
      var that = this;

      this.$refs["sealForm"].validate(valid => {
        if (valid) {
          var arr = that.formlist();
          console.log(arr, "+++++++++++++++")
          if (arr) {
            that.open = true
            axios({
              method: 'POST',
              url: process.env.VUE_APP_BASE_API + `/archive/sealmanage/viewSeal`,
              data: arr,
              headers: {
                Authorization: "Bearer " + getToken()
              },
              responseType: 'blob' // 更改responseType类型为 blob
            }).then(res => {
              console.log(res,"sdkljfsdklfjsdklfjk")
              const blob = new Blob([res.data], { type: 'application/pdf;charset-UTF-8' });
              this.pdfUrl = blob
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    },
    //关闭预览
    closeTap() {
      var that = this;
      that.open = false;
      deleteTempFile().then(res => { })

    },
    reset() {
      var that = this
      that.sealForm = {
        color: undefined,
        font: undefined,
        fontSize: undefined,
        align: undefined,
        fontBold: undefined,
        category: undefined,
        categoryId: undefined,
        totalHeight: 0,
        totalWidth: 0,
        xPosition: undefined,
        yPosition: undefined,
        rowNum: undefined,
        colNum: undefined,
        imagePath: undefined
      }
    },
    closeDelDialog() {
      this.reset()
      this.resetForm('sealForm')
      this.$emit('closeDelDialog')
    },


    //state   table表格合并


    //合并列
    removeNextObject(arr, target) {
      for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] === target && arr[i + 1] !== undefined) {
          arr.splice(i + 1, 1);
          break;
        }
      }
      return arr;
    },

    //判断行    点击当前单元格的的时候是否可以点击
    getNextRow(arr, target) {
      for (var i in arr) {
        for (var j in arr[i]) {
          if (arr[i][j] === target) {  // 获取当前行
            var nextList = arr[parseInt(i) + target.rowspan];  //获取当前合并单元格的下行的数据
            var flag = false;
            for (var k in nextList) {
              if (target.x == nextList[k].x) {
                flag = true;
                if (target.width < nextList[k].width) {
                  this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })
                  return false;
                }
              }
            }
            if (!flag) {
              this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })

              return false;
            }

          }
        }
      }


      return true
    },
    //判断列   点击当前单元格的的时候是否可以点击
    getRightCol(arr, target) {
      for (var i in arr) {
        for (var j in arr[i])
          if (arr[i][j] === target) {
            var rightList = arr[i][parseInt(j) + 1];
            var flag = false;

            //判断右侧是否有未合并行的单元格
            if ((target.x + target.width) == rightList.x) {

              if (target.height != rightList.height) {
                this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })
                return false
              } else {
                return true
              }

            } else {
              this.$message({ message: "当前单元格不能进行合并啦", type: 'warning' })
              return false
            }


          }
      }

      return true

    },
    //获取当前点击单元格右侧相邻的第一个单元格
    nextObject(arr, target) {
      var objRow = {};
      for (var i in arr) {
        for (var j in arr[i])
          if (arr[i][j] === target) {
            objRow = arr[i][parseInt(j) + 1]
            break
          }
      }

      return objRow
    },


    //合并行
    removeNextRowObject(arr, target) {
      // debugger;
      console.log(arr, target, "shuju ")
      var col = target.colspan;
      for (var i in arr) { //
        for (var j in arr[i]) {
          if (arr[i][j] === target) {  // 获取当前行
            var nextList = arr[parseInt(i) + target.rowspan];  //获取当前合并单元格的下行的数据
            for (var k in nextList) {  //删除要合并的数据
              if (nextList[k].x == target.x) {
                nextList.splice(k, col)
                break
              }
            }
          }
        }
      }

    },

    mergeRow(rowIndex, colIndex) {
      if (this.sealForm.totalHeight == undefined) {
        this.$message.warning('请输入总体高度哦~')
        return false
      }
      if (this.sealForm.totalWidth <= 0) {
        this.$message.warning('总体高度不能小于等于0哦~')
        return false
      }

      var count = 0;
      for (var k = 0; k < this.tableheigthList.length; k++) {
        count += this.tableheigthList[k].height;
      }

      if (count != this.sealForm.totalHeight) {
        this.$message.warning('每行的行高之和必须等于总体高度')
        return false
      }
      const cell = this.tableData[rowIndex][colIndex];

      if (cell.width > 0) {
        this.isCol = true;//如果有合并行，设置表格高度比较禁用
        var flag = this.getNextRow(this.tableData, cell)
        // console.log(flag)
        if (!flag) {
          return false
        }
        var numrow = ""
        for (var i in this.tableData) { //
          for (var j in this.tableData[i]) {
            if (this.tableData[i][j] === cell) {  // 获取当前行
              var nextList = this.tableData[parseInt(i) + cell.rowspan];  //获取当前合并单元格的下行的数据
              for (var k in nextList) {
                if (nextList[k].x == cell.x) {
                  numrow = nextList[k]
                  break
                }
              }
            }
          }
        }
        this.removeNextRowObject(this.tableData, cell)
        console.log(numrow, "4")
        cell.rowspan += numrow.rowspan;
        cell.height += numrow.height;
        cell.heightPx += numrow.heightPx;

      } else {
        this.$message.warning('请输入每个单元格的宽高哦')
      }
    },
    mergeColumn(rowIndex, colIndex) {
      if (this.sealForm.totalWidth == undefined) {
        this.$message.warning('请输入总体宽度哦~')
        return false
      }
      if (this.sealForm.totalWidth <= 0) {
        this.$message.warning('总体宽度不能小于等于0哦~')
        return false
      }
      var count = 0;
      for (var k = 0; k < this.tableTITleList.length; k++) {
        count += this.tableTITleList[k].width;
      }
      if (count != this.sealForm.totalWidth) {
        this.$message.warning('每列的宽之和必须等于总体宽度哦')
        return false
      }

      const cell = this.tableData[rowIndex][colIndex];

      if (cell.height <= 0) {
        this.$message.warning('请输入每个单元格的宽高哦')
        return false
      }

      this.isRow = true;//如果有合并列，设置表格宽度比较禁用
      var flag = this.getRightCol(this.tableData, cell)
      if (!flag) {
        return false
      }
      cell.colspan += this.nextObject(this.tableData, cell).colspan;
      cell.width += this.nextObject(this.tableData, cell).width;
      cell.widthPx += this.nextObject(this.tableData, cell).widthPx;
      this.updateCellPositions(cell, rowIndex, colIndex + 1, 0, 1, cell.width, 0);
    },
    updateCellPositions(cell, startRow, startCol, rowOffset, colOffset, widthOffset, heightOffset) {
      console.log(cell, startRow, startCol, rowOffset, colOffset, widthOffset, "===width", heightOffset, "====height")
      for (let i = startRow; i < this.tableData.length; i++) {
        this.removeNextObject(this.tableData[i], cell)
      }

      console.log(this.tableData, "liu")
    },

    // end
  }
}








</script>

<style lang="scss" scoped>
.line-main {
  border: 0.5px solid #DCDFE6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  line-height: 32px;
  width: 100%;
  border-radius: 6px;
}

.bed::after {
  content: " ";
  background: red;
  width: 100px;
  height: 60px;
  background-size: cover;
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}
</style>
